<template>
  <!-- 登录模态盒子 -->
  <div class="modal">
    <!-- 遮罩 -->
    <div class="mask" @click="changeIsShowLoginModal(false)"></div>
    <!-- 登录框 -->
    <div class="login-box">
      <!-- 点击消失图标 -->
      <p class="close" @click="changeIsShowLoginModal(false)"></p>
      <!-- 导航栏 -->
      <section class="nav">
        <a
          href="#"
          :class="isShowPhone ? 'current' : ''"
          @click="isShowPhone = true"
          >手机号登录</a
        >
        |
        <a href="#" :class="!isShowPhone ? 'current' : ''" @click="showQRcode"
          >微信扫码登录</a
        >
      </section>
      <!-- 内容 -->
      <!-- 手机登录的内容 -->
      <section class="content" v-show="isShowPhone">
        <div class="row">
          <input type="text" placeholder="请输入手机号" v-model="phoneNum" />
        </div>
        <div class="row">
          <slide-verify
            :l="42"
            :r="20"
            :w="362"
            :h="140"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            :style="{ width: '100%' }"
            class="slide-box"
            ref="slideBlock"
            :slider-text="msg"
            :accuracy="10"
            :imgs="arr"
          ></slide-verify>
        </div>
        <div class="row">
          <input
            type="text"
            placeholder="请输入短信验证码"
            v-model.trim="code"
          />
          <button class="btn-code" @click="getCode" v-show="!isShowCount">
            获取验证码
          </button>
          <button class="btn-code" @click="getCode" v-show="isShowCount">
            {{ count + "s" }}
          </button>
        </div>
        <div class="row">
          <!-- 点击登录按钮，判断是否有进行拼图滑块验证 -->
          <button class="btn-login" @click="loginFn">登录</button>
        </div>
      </section>

      <!-- 二维码展示 -->
      <!-- 微信二维码展示步骤二:准备一个有id的容器盒子， id=“weixin” ,将来获取的微信二维码会以iframe的方式嵌入到这个盒子中 -->
      <div id="weixin" class="qrcode" v-show="!isShowPhone">二维码</div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
import { sendSMSAPI, phoneReginAPI, bindingApi } from "@/request/api";
import { checkPhonNum } from "@/utils/index";
export default {
  data() {
    return {
      isShowPhone: true,
      msg: "向右滑动",
      arr: [
        require("../assets/img/code01.jpg"),
        require("../assets/img/code02.jpg"),
        require("../assets/img/code03.jpg"),
        require("../assets/img/code04.jpg"),
        require("../assets/img/code05.jpg"),
      ],
      phoneNum: "",
      count: 59,
      isShowCount: false,
      code: "",
    };
  },

  mounted() {},

  methods: {
    ...mapMutations({
      changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
      changeIsShowLoginBtn: "showLoginBtn/changeIsShowLoginBtn",
      // changeIsShowToast: "showToast/changeIsShowToast",
    }),
    ...mapActions({
      asyncChangeIsShowToast: "showToast/asyncChangeIsShowToast",
      asyncUpdateUserInfo: "userProfiles/asyncUpdateUserInfo",
    }),
    // 滑块插件方法
    // 拼图成功
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login success, 耗时 " + ms + "s";
    },
    // 拼图失败
    onFail() {
      this.onRefresh(); // 重新刷新拼图
    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";
    },

    // 封装倒计时函数
    countdown() {
      this.isShowCount = true;
      let timer = setInterval(() => {
        this.count--;
        if (this.count <= 0) {
          clearInterval(timer);
          this.isShowCount = false;
        }
      }, 1000);
    },

    // *****************完善部分的开始*******************//

    // 1.获取验证码的功能和登录功能都需要验证手机号格式和验证滑块验证码，因此将这两个部分封装成函数
    // 1.1首先将正则表达式验证手机号的封装到utils工具箱里面，因为验证手机号要经常用到，并且可能是很多其它组件，所以要封装到全局的工具箱里面
    // 1.2将手机验证功能和滑块验证功能封装到toVerify函数里面
    // 1.3但是return只会跳出当前函数，因此在函数里面调用函数，无法用return打断后面的代码，因此要理由return返回函数默认返回undefined，做一个判断来打断
    toVerify() {
      if (!checkPhonNum(this.phoneNum)) {
        // alert("请输入正确的手机号");
        this.asyncChangeIsShowToast({
          showToast: true,
          msg: "请输入正确的手机号",
          type: "warning",
        });
        return;
      }
      if (this.msg == "再试一次" || this.msg == "向右滑动") {
        // alert("请滑动滑块验证码");
        this.asyncChangeIsShowToast({
          showToast: true,
          msg: "请滑动滑块验证码",
          type: "warning",
        });
        return;
      }
      return true; //只有上面两个通过了才会返回true，否则返回的是undefined
    },

    // *****************完善部分的结尾*******************//

    // 点击获取验证码
    async getCode() {
      // 1、手机号码格式是否正确
      // 2、拼图滑块验证通过
      if (!this.toVerify()) return;
      // 3.操作正确就可以获取验证，向后台发送数据，发送成功的话就开始倒计时
      let res = await sendSMSAPI({
        phone: this.phoneNum,
      });
      if (!res) return;
      // alert("发送成功");
      this.asyncChangeIsShowToast({
        showToast: true,
        msg: "发送成功",
        type: "success",
      });
      // 将倒计时的功能封装成单独的函数
      this.countdown();
      // 4.统一处理请求响应不为0的情况 ==>去响应拦截器那里做统一处理
    },

    // 点击进行手机登录
    async loginFn() {
      // 1、手机号码格式是否正确
      // 2、拼图滑块验证通过
      if (!this.toVerify()) return;
      // 3、验证码是否为空（注意，这里我们前端并没有拿到发送的手机验证码，所以只能判空）
      if (this.code == "") {
        // alert("请输入验证码");
        this.asyncChangeIsShowToast({
          showToast: true,
          msg: "请输入验证码",
          type: "warning",
        });
        return;
      }

      // 4、发起登录请求  ==> 这里要做一个判断，如果有uuid则是要关联登录，无则是普通手机号登录
      let uuid = localStorage.getItem("uuid");
      let res = null;
      if (uuid) {
        // 关联手机号登录，发送关联登录的请求
        res = await bindingApi({
          verifyCode: this.code,
          phone: this.phoneNum,
          uuid,
        });
      } else {
        // 普通登录
        res = await phoneReginAPI({
          verifyCode: this.code,
          phone: this.phoneNum,
        });
      }
      // alert("登录成功");
      this.asyncChangeIsShowToast({
        showToast: true,
        msg: "登录成功",
        type: "success",
      });
      // 登录成功以后要做的事情
      // 1.存储token凭证，在后台返回来的是x-auth-token
      localStorage.setItem("token", res["x-auth-token"]); //request里面统一处理了响应回来的数据是res.data所以这里不需要再加data了
      // 2.隐藏登录模态窗口
      this.changeIsShowLoginModal(false);
      // 3.TopBar的登录状态的切换为购物车
      // 通过在store里面新建ShowLoginBtn模块仓库，里面设置一个isShowLoginBtn状态，切换登录和购物车  v-if="isShowLoginBtn"
      // 并且点击完登录后，购物车要立马出现
      this.changeIsShowLoginBtn(false);
      //1.4获取用户信息并渲染
      this.asyncUpdateUserInfo();

      // 关联登录以后要处理的数据
      // 删除uuid 清除浏览器地址栏上的code
      if (uuid) {
        this.$router.push(this.$route.path);
        localStorage.removeItem("uuid");
      }
    },

    // 点击获取展示的二维码
    // 微信二维码展示步骤三:点击切换微信扫码登录这一项，并申请微信登录二维码,到此，二维码就已经展示出来了，样式就在utils里面设置一个文件夹，设置样式，并通过一个转译js文件来转译，转译后的样式在下面的href里面调用
    showQRcode() {
      // 1.切换微信扫码登录这一项
      this.isShowPhone = false;
      // 2.申请微信登录二维码
      let _this = this;
      new WxLogin({
        id: "weixin", //上面设置的容器盒子，装申请来的二维码
        appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
        scope: "snsapi_login",
        // 扫码成功后重定向的接口
        redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
        // state填写编码后的url
        state: encodeURIComponent(
          // 这个url是项目地址，注意端口号
          window.btoa("http://127.0.0.1:8081" + _this.$route.path)
        ),
        // 调用样式文件
        // href: "data:text/css;base64LmltcG93ZXJCb3ggLnRpdGxlLA0KLmltcG93ZXJCb3ggLmluZm8gew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9",
        href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .login-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 555px;
    height: 423px;
    background: url("../assets/img/login-box-bg.png");
    .close {
      position: absolute;
      top: 18px;
      right: 60px;
      width: 22px;
      height: 22px;
      background: url("../assets/img/close.png");
      cursor: pointer;
    }
    .nav {
      width: 100%px;
      text-align: center;
      height: 20px;
      padding-top: 40px;
      color: rgb(214, 214, 214);
      a {
        text-decoration: none;
        font-size: 18px;
        color: rgb(214, 214, 214);
        vertical-align: middle;
        &.current {
          color: rgb(77, 77, 77);
        }
      }
    }
    .content {
      width: 355px;
      height: 300px;
      margin: 30px auto 0;
      .row {
        display: flex;
        height: 45px;
        margin-bottom: 20px;
        input {
          height: 45px;
          flex: 1;
          outline: none;
          text-indent: 1em;
          box-sizing: border-box;
        }
        .btn-code {
          background-color: #0a328e;
          color: #fff;
          margin-left: 10px;
          border: none;
          cursor: pointer;
          width: 85px;
          height: 45px;
        }
        .btn-login {
          width: 100%;
          background-color: #0a328e;
          color: #fff;
          border: none;
          cursor: pointer;
        }
      }
    }
    // 二维码盒子
    #weixin {
      text-align: center;
      margin-top: 10px;
    }
  }
}
// 滑块验证模块的样式
/deep/.slide-box {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  canvas {
    position: absolute;
    left: 0;
    top: -120px;
    display: none;
    width: 100%;
    box-sizing: border-box;
  }
  .slide-verify-block {
    width: 85px;
    height: 136px;
  }
  .slide-verify-refresh-icon {
    top: -120px;
    display: none;
  }
  &:hover {
    canvas {
      display: block;
    }
    .slide-verify-refresh-icon {
      display: block;
    }
  }
}
</style>